<template>
  <div class="custom-page in-warehouse-grounding">
    <div class="main">
      <!-- 待上架和已上架列表 -->
      <div class="grounding-list">
        <a-collapse v-model="activeKey">
          <a-collapse-panel key="1">
            <template #header>
              <div class="pending-listing-header">
                待上架（{{ pendingSource.length }}个包裹，{{ pendingTotal }}个商品）
              </div>
            </template>
            <div>
              <!-- :row-selection="rowSelection"
                :expanded-row-keys.sync="expandedRowKeys" -->
              <a-table
                rowKey="id"
                size="small"
                :columns="pendingColumns"
                :data-source="pendingSource"
                :pagination="false"
              >
                <span slot="action" slot-scope="text, record, index">
                  <a-button type="link" @click="grounding(record)"> 上架 </a-button>
                </span>
              </a-table>
            </div>
          </a-collapse-panel>
          <a-collapse-panel key="2">
            <template #header>
              <div class="pending-listing-header">
                已上架（{{ listedSource.length }}个包裹，{{ listedTotal }}个商品）
              </div>
            </template>
            <div class="">
              <a-table
                size="small"
                rowKey="id"
                :columns="listedColumns"
                :data-source="listedSource"
                :pagination="false"
              >
                <span slot="action" slot-scope="text, record">
                  <a @click="handlePrint(record.bar)">打印</a>
                </span>
              </a-table>
            </div>
          </a-collapse-panel>
        </a-collapse>
        <div class="button-wrap">
          <a-button type="primary" :disabled="!isOrderGroundEnd" @click="submit()" :loading="loading">
            完成上架
          </a-button>
        </div>
      </div>
      <!-- 货架情况表 -->
      <div class="shelf-condition-list">
        <div class="shelf-condition-title">库区现状</div>
        <div class="list-wrap">
          <div v-for="l in reservoirAreaList" :key="l.code">
            <div :style="`color: ${l.color}`">{{ l.code }}({{ l.used }}/{{ l.total }})</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 上架弹窗 -->
    <ModalGrounding ref="modalGroundingRef" @complete="getInfo()" />
    <!-- 打印详情弹窗 -->
    <PrintDetailModel ref="printDetailModel" ></PrintDetailModel>
  </div>
</template>

<script>
import ModalGrounding from '@/views/warehouse/components/modal-grounding.vue'
import PrintDetailModel from './modules/PrintDetailModel.vue'
import { inOrderInfo, orderGroundEnd } from '@/api/order.js'
export default {
  components: { ModalGrounding,PrintDetailModel },
  data() {
    return {
      activeKey: '1',
      pendingColumns: [
        {
          title: '包裹ID',
          dataIndex: 'bar',
          key: 'bar',
        },
        {
          title: '商品数量',
          dataIndex: 'num',
          key: 'num',
        },
        {
          title: '操作',
          align: 'center',
          fixed: 'right',
          width: 147,
          scopedSlots: { customRender: 'action' },
        },
      ],
      pendingSource: [],
      pendingTotal: 0,
      listedColumns: [
        {
          title: '包裹ID',
          dataIndex: 'bar',
          key: 'bar',
        },
        {
          title: '商品数量',
          dataIndex: 'num',
          key: 'num',
        },
        {
          title: '存储库位',
          dataIndex: 'warePid',
          key: 'warePid',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 147,
          scopedSlots: { customRender: 'action' },
        },
      ],
      listedSource: [],
      listedTotal: 0,
      rowSelection: {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
        },
        onSelect: (record, selected, selectedRows) => {
          console.log(record, selected, selectedRows)
        },
        onSelectAll: (selected, selectedRows, changeRows) => {
          console.log(selected, selectedRows, changeRows)
        },
      },
      expandedRowKeys: [],
      // 库区列表
      reservoirArea: [
        {
          code: 'A-1-1',
          total: 10,
          used: 1,
        },
        {
          code: 'A-1-2',
          total: 10,
          used: 0,
        },
        {
          code: 'A-1-3',
          total: 10,
          used: 0,
        },
        {
          code: 'B-1-1',
          total: 10,
          used: 1,
        },
        {
          code: 'B-1-2',
          total: 10,
          used: 0,
        },
        {
          code: 'B-1-3',
          total: 10,
          used: 0,
        },
        {
          code: 'C-1-1',
          total: 10,
          used: 4,
        },
        {
          code: 'C-1-2',
          total: 10,
          used: 5,
        },
        {
          code: 'C-1-3',
          total: 10,
          used: 0,
        },
      ],
      loading: false,
      info: {},
    }
  },
  computed: {
    reservoirAreaList() {
      const { reservoirArea } = this
      return reservoirArea.map((e) => {
        if (e.used >= 4) {
          e.color = 'red'
        } else {
          e.color = 'green'
        }
        return e
      })
    },
    isOrderGroundEnd() {
      const { pendingSource } = this
      return pendingSource.length <= 0
    },
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    grounding(e) {
      this.$refs.modalGroundingRef.open({ ...e })
    },
    async getInfo() {
      try {
        const id = this.$route.query.id
        const params = { id }
        const r = await inOrderInfo(params)
        this.info = r.result
        const arr = r.result.boxBarInfoVtoLists.map((e) => {
          e.num = e.udiVtoLists.length
          return e
        })
        // 待上架包裹
        this.pendingSource = arr.filter((f) => f.state * 1 == 2) || []
        // console.log('this.pendingSource', this.pendingSource)
        if (this.pendingSource.length > 0) {
          this.pendingTotal = this.pendingSource
            .map((e) => e.num)
            .reduce((a, b) => {
              return a + b
            })
        } else {
          this.pendingTotal = 0
        }
        // 已上架包裹
        this.listedSource = arr.filter((f) => f.state * 1 == 3) || []
        if (this.listedSource.length > 0) {
          this.listedTotal = this.listedSource
            .map((e) => e.num)
            .reduce((a, b) => {
              return a + b
            })
        } else {
          this.listedTotal = 0
        }
      } catch (_) {
        console.log('err', _)
      }
    },
    async submit() {
      try {
        const { info } = this
        const params = { orderId: info.id }
        this.loading = true
        await orderGroundEnd(params)
        this.$message.success('操作成功')
        this.$router.go(-1)
      } catch (_) {}
      this.loading = false
    },
    handlePrint(bar) {
      this.$refs.printDetailModel.show(bar)
    }
  },
}
</script>

<style lang="scss" scoped>
.in-warehouse-grounding {
  .main {
    display: flex;
    .grounding-list {
      flex: 1;
    }
    .shelf-condition-list {
      width: 120px;
      margin-left: 20px;
      text-align: right;
      .shelf-condition-title {
        font-size: 20px;
        font-weight: 650;
        margin-bottom: 20px;
      }
      .list-wrap {
        line-height: 22px;
        font-size: 14px;
      }
    }
  }
  .button-wrap {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
